<template>
  <!-- 分类型特征相关性页面的 -->
  <div
    id="eat"
    class="chart-container"
    style="
 position: absolute;
      width:100%;
      height: 100%;
       top: 20px;
    "
  ></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  var chart_eat = echarts.init(document.getElementById("eat"), "white", {
    renderer: "canvas",
  });
  var option_eat = {
    animation: true,
    animationThreshold: 2000,
    animationDuration: 1000,
    animationEasing: "cubicOut",
    animationDelay: 0,
    animationDurationUpdate: 300,
    animationEasingUpdate: "cubicOut",
    animationDelayUpdate: 0,
    aria: {
      enabled: false,
    },
    color: [
      "#5470c6",
      "#91cc75",
      "#fac858",
      "#ee6666",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc",
    ],
    series: [
      {
        type: "bar",
        name: "\u5361\u65b9\u7edf\u8ba1\u91cf",
        legendHoverLink: true,
        data: [2.15, 1.38],
        realtimeSort: false,
        showBackground: false,
        stackStrategy: "samesign",
        cursor: "pointer",
        barMinHeight: 0,
        barCategoryGap: "20%",
        barGap: "30%",
        large: false,
        largeThreshold: 400,
        seriesLayoutBy: "column",
        datasetIndex: 0,
        clip: true,
        zlevel: 0,
        z: 2,
        label: {
          show: false,
          margin: 8,
        },
        itemStyle: {
          color: "#FF8B8B",
        },
        rippleEffect: {
          show: true,
          brushType: "stroke",
          scale: 2.5,
          period: 4,
        },
      },
      {
        type: "bar",
        name: "p\u503c",
        legendHoverLink: true,
        data: [0.34, 0.5],
        realtimeSort: false,
        showBackground: false,
        stackStrategy: "samesign",
        cursor: "pointer",
        barMinHeight: 0,
        barCategoryGap: "20%",
        barGap: "30%",
        large: false,
        largeThreshold: 400,
        seriesLayoutBy: "column",
        datasetIndex: 0,
        clip: true,
        zlevel: 0,
        z: 2,
        label: {
          show: false,
          margin: 8,
        },
        itemStyle: {
          color: "#63B8FF",
        },
        rippleEffect: {
          show: true,
          brushType: "stroke",
          scale: 2.5,
          period: 4,
        },
      },
      {
        type: "bar",
        name: "\u81ea\u7531\u5ea6",
        legendHoverLink: true,
        data: [2.0, 2.0],
        realtimeSort: false,
        showBackground: false,
        stackStrategy: "samesign",
        cursor: "pointer",
        barMinHeight: 0,
        barCategoryGap: "20%",
        barGap: "30%",
        large: false,
        largeThreshold: 400,
        seriesLayoutBy: "column",
        datasetIndex: 0,
        clip: true,
        zlevel: 0,
        z: 2,
        label: {
          show: false,
          margin: 8,
        },
        itemStyle: {
          color: "#61BFAD",
        },
        rippleEffect: {
          show: true,
          brushType: "stroke",
          scale: 2.5,
          period: 4,
        },
      },
    ],
    legend: [
      {
        data: [
          "\u5361\u65b9\u7edf\u8ba1\u91cf",
          "p\u503c",
          "\u81ea\u7531\u5ea6",
        ],
        selected: {
          "\u5361\u65b9\u7edf\u8ba1\u91cf": true,
          "p\u503c": true,
          "\u81ea\u7531\u5ea6": true,
        },
        show: true,
        left: "center",
        top: "6%",
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        backgroundColor: "transparent",
        borderColor: "#ccc",
        borderWidth: 1,
        borderRadius: 0,
        pageButtonItemGap: 5,
        pageButtonPosition: "end",
        pageFormatter: "{current}/{total}",
        pageIconColor: "#2f4554",
        pageIconInactiveColor: "#aaa",
        pageIconSize: 15,
        animationDurationUpdate: 800,
        selector: false,
        selectorPosition: "auto",
        selectorItemGap: 7,
        selectorButtonGap: 10,
      },
    ],
    tooltip: {
      show: true,
      trigger: "axis",
      triggerOn: "mousemove|click",
      axisPointer: {
        type: "shadow",
      },
      showContent: true,
      alwaysShowContent: false,
      showDelay: 0,
      hideDelay: 100,
      enterable: false,
      confine: false,
      appendToBody: false,
      transitionDuration: 0.4,
      textStyle: {
        fontSize: 14,
      },
      borderWidth: 0,
      padding: 5,
      order: "seriesAsc",
    },
    xAxis: [
      {
        show: true,
        scale: false,
        nameLocation: "end",
        nameGap: 15,
        gridIndex: 0,
        axisLabel: {
          show: true,
          position: "bottom",
          rotate: -8,
          margin: 8,
        },
        inverse: false,
        offset: 0,
        splitNumber: 5,
        minInterval: 0,
        splitLine: {
          show: true,
          lineStyle: {
            show: true,
            width: 1,
            opacity: 1,
            curveness: 0,
            type: "solid",
          },
        },
        data: [
          "\u662f\u5426\u6709\u8fc7\u81ea\u6740\u7684\u5ff5\u5934",
          "\u7cbe\u795e\u75be\u75c5\u5bb6\u65cf\u53f2",
        ],
      },
    ],
    yAxis: [
      {
        show: true,
        scale: false,
        nameLocation: "end",
        nameGap: 15,
        gridIndex: 0,
        axisLabel: {
          show: true,
          margin: 8,
          formatter: "{value}",
        },
        inverse: false,
        offset: 0,
        splitNumber: 5,
        min: 0,
        max: 10,
        minInterval: 0,
        splitLine: {
          show: true,
          lineStyle: {
            show: true,
            width: 1,
            opacity: 1,
            curveness: 0,
            type: "solid",
          },
        },
      },
    ],
    title: [
      {
        show: true,
        text: "\u201c\u996e\u98df\u4e60\u60ef\u201d\u4e0e\u5176\u4ed6\u7279\u5f81\u95f4\u7684\u5361\u65b9\u68c0\u9a8c",
        target: "blank",
        subtarget: "blank",
        left: "center",
        padding: 5,
        itemGap: 10,
        textAlign: "auto",
        textVerticalAlign: "auto",
        triggerEvent: false,
      },
    ],
  };
  chart_eat.setOption(option_eat);
});
</script>

<style></style>
